<template>
  <div>
    <template v-if="item.children">
      <el-submenu :index="item.pkid">
        <template slot="title">
          <div class="cus-menu-item" v-if="item.index_name">
            <span class="sub-title">
              <!-- @click="clickReport(item)" :class="currentItem.id === item.id ? 'isActive': '' " -->
              <img :src="item.icon" v-if="item.icon" />
              <!-- <svg-icon v-if="item.icon" :icon-class="item.name" class="title-icon"/> -->
              <span style="margin-left: 8px">{{ item.index_name }}</span>
            </span>

            <template v-if="item.fileInfo">
              <!-- :style="{
                  color: theme,
                  background: ligthTheme,
                }" -->
              <span
                title="专题报告"
                class="special-report bg-gray"
                style="font-size: 14px"
                @click.stop="handleReport(item)"
              >
                <svg-icon icon-class="体检报告" class="item-icon" />
              </span>
            </template>
            <!-- <template v-else>
              <span
                title="专题报告"
                class="special-report bg-gray"
                style="font-size: 14px"
              >
                <svg-icon icon-class="体检报告" class="item-icon"/>
              </span>
            </template> -->
          </div>
          <div class="cus-menu-item" v-else>
            <span class="sub-title">
              <svg-icon icon-class="视角" class="sub-icon" />
              <span>{{ item.name }}</span>
            </span>
          </div>
        </template>
        <cus-menu
          v-for="(child, index) in item.children"
          :item="child"
          :key="index"
          :title="child.name"
        />
      </el-submenu>
    </template>
    <template v-else>
      <!-- <el-menu-item :index="item.pkid" v-if="item.type === 'data'">
        <template slot="title">
        <div class="cus-menu-item">
          <span class="sub-title">
            <svg-icon icon-class="视角" class="sub-icon"/>
            <span>{{ item.name }}</span>
          </span>
        </div>
        </template>
      </el-menu-item> -->
      <el-menu-item :index="item.pkid" :key="item.pkid">
        <svg-icon v-if="item.icon" :icon-class="item.icon" />
        <span
          :class="['menu-item-title', item.singleMenu ? 'single-menu' : '']"
          style="display: flex; align-items: center"
          ><span><svg-icon icon-class="指标1" class="single-icon" /></span>
          <p>{{ item.name }}</p></span
        >
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'cus-menu',
  inject: ['injectReport'],
  props: {
    item: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      currentItem: '',
    }
  },
  methods: {
    handleReport(item) {
      this.currentItem = item
      this.injectReport(item)
    },
    clickReport(item) {
      this.currentItem = item
    },
  },
  computed: {
    ...mapGetters(['theme', 'ligthTheme']),
  },
}
</script>

<style lang="scss">
.menu-item-title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #848a9f;
  // display: flex;
  // align-items: center;

  .single-icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
  }
}

.single-menu,
.sub-title {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #4e525f;

  .sub-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}

.el-submenu__title {
  .special-report {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    line-height: 24px;
    text-align: center;
    margin-top: 8px;
    background: #e4f8ff;
    cursor: pointer;
  }

  // .isActive {
  //   background: #10A6DD;
  // }
}

.item-icon {
  color: #10a6dd;
}

.single-menu {
  margin-left: 8px;
}
.cus-menu-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .sub-title {
    display: flex;
    align-items: center;
    img {
      width: 20px;
      fill: #c0c4cc;
      display: inline-block;
      margin-right: 5px;
    }

    .title-icon {
      width: 20px;
      height: 20px;
      // color: black;
      color: #c0c4cc;
      display: inline-block;
      margin-right: 5px;
    }
  }

  .special-report {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    line-height: 24px;
    text-align: center;
    margin-top: 8px;
  }
}
.bg-gray {
  background: gray;
  color: white;
  cursor: default;
}

::v-deep {
  .el-submenu .el-menu-item {
    line-height: 20px !important;
  }
}

.menu-item-title {
  // margin-top: -5px;
  p {
    // height: 30px;
    line-height: 20px;
    // margin-top: -1px;
    // width: 14rem;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    // cursor: pointer;
  }
}
</style>
